<template>
  <div class="friendinfo">
    <div class="esinfo">
      <div class="left">
        <div class="people">
          <div class="nickname">{{selectFriend.nickname}}</div>
          <span
            class="icon iconfont icon-nan1"
            :class="[selectFriend.sex == 0? 'icon-nan1': 'icon-nv1']"
          ></span>
        </div>
        <div class="signature">{{selectFriend.signature}}</div>
      </div>
      <div class="right">
        <img :src="selectFriend.img" alt class="avatar" />
      </div>
    </div>
    <div class="detinfo">
      <div class="remark">
        <span>备&nbsp;&nbsp;&nbsp;注</span>
        {{selectFriend.remark}}
        <!-- <input type="text" v-model="newRemark" :placeholder="selectFriend.remark" @blur="changeRemarkIn()"/> -->
      </div>
      <div class="area">
        <span>地&nbsp;&nbsp;&nbsp;区</span>
        {{selectFriend.area}}
      </div>
      <div class="wxid">
        <span>微信号</span>
        {{selectFriend.wxid}}
      </div>
    </div>
    <div class="send" @click="toChatList">
      <span>发消息</span>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  computed: {
    ...mapGetters(["selectFriend"])
  },
  methods: {
    ...mapActions(["toChatList"])
  }
};
</script>

<style scoped>
.friendinfo {
  padding: 0 90px;
}

.friendinfo .esinfo {
  display: flex;
  align-items: center;
  padding: 100px 0 45px 0;
}

.friendinfo .left {
  flex: 1;
}

.left .people .nickname {
  display: inline-block;
  font-size: 20px;
  margin: 0 10px 16px 0;
}

.icon-nan1,
.icon-nv1 {
  font-size: 20px;
}

.icon-nan1 {
  color: #46b6ef;
}

.icon-nv1 {
  color: #f37e7d;
}

.left .signature {
  font-size: 14px;
  color: rgba(153, 153, 153, 0.8);
}

.right .avatar {
  width: 60px;
  height: 60px;
  border-radius: 3px;
}

.friendinfo .detinfo {
  padding: 40px 0;
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
}

.detinfo .remark,
.detinfo .area,
.detinfo .wxid {
  font-size: 14px;
  margin-top: 20px;
}

.remark span,
.area span,
.wxid span {
  width: 65px;
  display: inline-block;
  font-size: 14px;
  color: rgba(153, 153, 153, 0.8);
}

.detinfo .remark {
  margin-top: 0;
}

.friendinfo .send {
  position: relative;
  text-align: center;
  width: 140px;
  height: 36px;
  left: 115px;
  top: 50px;
  line-height: 36px;
  font-size: 14px;
  color: #fff;
  background-color: #1aad19;
  cursor: pointer;
  border-radius: 2px;
}

.friendinfo .send:hover {
  background: rgb(18, 150, 17);
}
</style>